<template>
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M3.91475 2.22725C4.13442 2.00758 4.49058 2.00758 4.71025 2.22725L8.08525 5.60225C8.30492 5.82192 8.30492 6.17808 8.08525 6.39775L4.71025 9.77275C4.49058 9.99242 4.13442 9.99242 3.91475 9.77275C3.69508 9.55308 3.69508 9.19692 3.91475 8.97725L6.892 6L3.91475 3.02275C3.69508 2.80308 3.69508 2.44692 3.91475 2.22725Z"
      fill="currentColor" />
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#CBCBCB',
  });
</script>

<style scoped lang="scss">
  svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
    outline: none;
    color: v-bind('props.color');
    cursor: pointer;
    &:hover {
      color: #222222;
    }
  }
</style>
